<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>泉城投票</title>
	<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />  
    <meta name="format-detection" content="telephone=no">
	<link rel="stylesheet" href="/css/vote/unregister/dp.css">
	<script src="/js/admin/jquery.min.js"></script>
	<script src="/js/ichart.latest.min.js"></script>
</head>
<body>
	<div id="main" >
		<h1 class="title">
			<span>
				
			</span>
		</h1>
		<div class="con">
			@if(!empty($vote_data))
				@foreach($vote_data as $key=>$items)
					<div id="ichart{{$key+1}}" data-group_name="@if(!empty($items)){{$items[0]['group_name']}} @endif">
						@foreach($items as $k=>$item)
							<input style="display: none;" class="group_{{$key}}" data-title="{{$item['title']}}" data-number="{{$item['voteNumber']}}" data-color="{{$color[$k]}}"/>
						@endforeach
					</div>
				@endforeach
			@endif
		</div>

	</div>
	<script>
	$(function(){
		$('.title').click(function(){
			location.reload();
		});
		var dataLen = "{{$dataLen}}";
		for(var i=0;i<parseInt(dataLen);i++){
		    var sort = i+1;
		    var group_name = $('#ichart'+sort).data('group_name');
            var data = [];
            if( $('.group_'+i).length >0) {
                $('.group_'+i).each(function () {
                    var item = {
                        name: $(this).data('title'),
                        value: $(this).data('number'),
                        color: $(this).data('color')
                    };
                    data.push(item);
                });
            }
            DrawChart('ichart'+sort,group_name,data);
		}

	});

       /**
        * ele必须为ID名,不要#
        * @param  title : 图表title
        * @param  data : 横坐标数据
        */
	function DrawChart(ele,title,data){
            var chart = iChart.create({
            render:ele,
            width:$('#'+ele).width(),
            height:$('#'+ele).width()*1.05,
            background_color:"#fefefe",
            gradient:false,
            color_factor:0.4,
            animation : true,//开启过渡动画
            animation_duration:800,//800ms完成动画
            animation_timing_function:'easeInOut',
            border:{
                  color:"BCBCBC",
                  width:0
            },
            align:"center",
            offsetx:0,
            offsety:0,
            sub_option:{
                  border:{
                        color:"#BCBCBC",
                        width:1
                  },
                  label:{
                        fontweight:500,
                        fontsize:16,
                        color:"#eea128",
                        sign:"square",
                        sign_size:12,
                        border:{
                              color:"#BCBCBC",
                              width:1
                        },
                        background_color:"#fefefe"
                  }
            },
            shadow:true,
            shadow_color:"#666666",
            shadow_blur:7,
            showpercent:true,
            column_width:"35%",
            bar_height:"70%",
            radius:"90%",
            title:{
                  text:title,
                  color:"#ef8937",
                  fontsize:36,
                  font:"微软雅黑",
                  textAlign:"center",
                  height:30,
                  offsetx:0,
                  offsety:0
            },
            subtitle:{
                  text:"",
                  color:"#111111",
                  fontsize:16,
                  font:"微软雅黑",
                  textAlign:"center",
                  height:20,
                  offsetx:0,
                  offsety:0
            },
            footnote:{
                  text:"",
                  color:"#111111",
                  fontsize:12,
                  font:"微软雅黑",
                  textAlign:"right",
                  height:20,
                  offsetx:0,
                  offsety:0
            },
            legend:{
                  enable:false,
                  background_color:"#fefefe",
                  color:"#333333",
                  fontsize:12,
                  border:{
                        color:"#BCBCBC",
                        width:1
                  },
                  column:1,
                  align:"right",
                  valign:"center",
                  offsetx:0,
                  offsety:0
            },
            coordinate:{
                  width:"80%",
                  height:"80%",
                  background_color:"#ffffff",
                  axis:{
                        color:"#eea429",
                        width:["","",2,2]
                  },
                  grid_color:"#ffffff",
                  label:{
                        fontweight:500,
                        color:"#eea128",
                        fontsize:14
                  }
            },
            label:{
                  fontweight:500,
                  color:"#ef8937",
                  fontsize:16
            },
            type:"column2d",
            data:data
      });
      chart.draw();
      }

    //刷新页面
    setInterval(function () {
        window.location.reload(true);
    },1000*180);

	</script>
</body>
</html>